<template>
  <div>
    <Header :loginState="'toLogin'" :headerStyle="'light'"></Header>
    <Reload></Reload>
    <!-- HERO
            ============================================= -->
    <section id="page-hero" class="hero py-6">
      <div class="hero-center">
        <!-- breadcrumb Start -->
        <div class="container">
          <div class="row hero-content text-center">
            <div class="col-lg-9 mx-auto">
              <h2>智慧问答</h2>
              <nav
                aria-label="breadcrumb"
                class="d-flex flex-column align-items-center text-center"
              >
                <ol class="breadcrumb mb-0 bg-transparent p-0">
                  <li class="breadcrumb-item">
                    <a class="text-white" href="index.html">返回首页</a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    问答
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
        <!-- breadcrumb End -->
      </div>
      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <!-- BLOG
            ============================================= -->
    <section id="blog" class="blog py-6">
      <div class="container">
        <!-- Title -->
        <div class="section-title text-center">
          <h3 class="sub-title base-color mb-2">智慧问答</h3>
          <h2 class="title text-dark">问答机器人</h2>
        </div>

        <div class="blog-section-right-bg">
          <img src="../assets/img/blog-section-right-bg.png" alt="/" />
        </div>

        <div class="blog-section-left-bg">
          <img src="../assets/img/blog-section-left-bg.png" alt="/" />
        </div>

        <div class="row mt-2" id="chat">
          <div class="container">
            <div id="chat-type" class="col-11 mx-auto">
              <ul class="chat-type" ref="chat_type">
                <li class="chat-type-title btn">问答科目:</li>
                <li
                  v-for="(p, index) in typeList"
                  :key="index"
                  class="chat-type-item btn"
                  :class="{ select: index == 0 }"
                  @click="selectType(index)"
                >
                  {{ p.type }}
                </li>
              </ul>
            </div>
            <div class="col-11 mx-auto" id="chat-area">
              <!-- for循环chat板块 -->

              <div id="info" v-for="(p, index) in chatList" :key="index">
                <div :class="p.position">
                  <img
                    v-if="p.position === 'left'"
                    src="../assets/img/robot.png"
                    alt=""
                  />
                  <img v-else src="../assets/img/user.png" alt="" />

                  <span class="name">{{ p.name }}</span>
                  <span class="content">{{ p.message }}</span>
                </div>
              </div>

              <!-- <div id="info">
                <div class="right">
                  <img src="../assets/img/about-02.jpg" alt="" />

                  <span class="name">工具人</span>
                  <span class="content">我在说话</span>
                </div>
              </div>-->
            </div>

            <div
              class="input-group send-problem info-input"
              style="padding: 0 8%"
            >
              <input
                type="text"
                class="form-control"
                placeholder="请输入您的问题"
                aria-label=""
                aria-describedby=""
                v-model="question"
                @keypress.enter="subQuestion"
                ref="chatInput"
              />
              <!-- <ul v-show="chat_input">
                <li
                  v-for="(p, index) in questionList"
                  :key="index"
                  @click="questionGetHelp(index)"
                >
                  {{ p }}
                </li>
              </ul> -->
              <!-- <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">
                  发送
                </button>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- End container -->
    </section>
    <!-- END BLOG -->

    <!-- FOOTER
            ============================================= -->
    <footer id="footer" class="container-fluid pt-6 bg-light">
      <!-- FOOTER CONTENT -->
      <div class="row">
        <div class="footer-section-bg-graphics">
          <img src="../assets/img/footer-section-bg.png" alt="/" />
        </div>

        <div class="container">
          <div class="row footer-section">
            <!-- FOOTER Roiton-INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-logo">
                <!-- Title -->
                <a href="index.html">
                  <h3 class="base-color">Roiton</h3>
                </a>

                <!-- Text -->
                <p>
                  sed diam nonummy nibh euismod tincidunt aliquam erat volutpat.
                </p>
                <p>
                  Lorem ipsum dolor nibh euismod tincidunt sit amet adipiscing
                  elit, ut laoreet dolore magna aliquam erat volutpat.
                </p>
              </div>
            </div>
            <!-- END FOOTER Roiton-INFO -->

            <!-- FOOTER INFO -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Contact Us</h4>
                <!-- Text -->
                <p>Lorem ipsum dolor sit amet, consectetuer sed volutpat.</p>

                <ul>
                  <li>
                    <span class="base-color lni-map-marker"></span>NewYork,
                    United State
                  </li>
                  <li>
                    <span class="base-color lni-phone"></span>+123-4567-890
                  </li>
                  <li>
                    <span class="base-color lni-envelope"></span
                    ><a href="mailto:" class="text-dark"
                      ><span
                        class="__cf_email__"
                        data-cfemail="eb988a869b878eab988a869b878ec5888486"
                        >[email&#160;protected]</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
            <!-- END FOOTER INFO -->

            <!-- FOOTER NEWSLETTER FORM -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-newsletter">
                <!-- Title -->
                <h4>Subscribe Us</h4>

                <!-- Text -->
                <p>
                  Stay up to date with our latest news, updates and our new
                  products!
                </p>

                <form action="#" method="get">
                  <button class="newsletter-btn" type="submit">
                    <i class="lni-envelope text-white"></i>
                  </button>
                  <input
                    class="newsletter"
                    type="text"
                    placeholder="mail@example.com"
                  />
                </form>
              </div>
            </div>
            <!-- END FOOTER NEWSLETTER FORM -->

            <!-- FOOTER SOCIAL LINKS -->
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                <!-- Title -->
                <h4>Social Links</h4>

                <!-- Text -->
                <p>
                  Join our mailing list to stay up to date and get notices about
                  our new releases!
                </p>

                <ul class="social-link list-inline">
                  <li>
                    <a href="#"><i class="lni-facebook-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-twitter-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-google-plus"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-instagram-filled"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- END SOCIAL LINKS -->
          </div>
        </div>
        <!-- End container -->
      </div>
      <!-- END FOOTER CONTENT -->

      <!-- FOOTER COPYRIGHT -->
      <div class="row footer-copy-right">
        <div class="container">
          <div class="row border-top">
            <div class="col-sm-8 footer-copy-right-text">
              Copyright &copy; 2021.Company name All rights reserved.
            </div>
          </div>
        </div>
      </div>
      <!-- END FOOTER COPYRIGHT -->
    </footer>
    <!-- END FOOTER -->
    <ReturnTop></ReturnTop>
  </div>
</template>

<script>
// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";
import axios from "axios";

export default {
  data() {
    return {
      // 智慧问答
      question: "",
      chatList: [
        {
          position: "left",
          name: "小药机器人",
          message: "请问有什么需要帮助的吗？",
        },
      ],

      // chat_input: false,
      // questionList: [],

      typeList: [
        { type: "糖尿病", value: "askans" },
        { type: "儿科", value: "erke" },
        { type: "妇科", value: "fuke" },
        { type: "男科", value: "nanke" },
        { type: "内科", value: "neike" },
        { type: "外科", value: "waike" },
        { type: "肿瘤科", value: "zhongliuke" },
      ],
      questionType: 0,
    };
  },
  computed: {
    getQuestion() {
      return this.question.replace(/(^\s*)|(\s*$)/g, "");
    },
  },
  mounted() {
    //初始化关闭加载动画
    // $("#chat-area::before").css("opacity", 0);
  },
  methods: {
    selectAnswer(n) {
      return "answer" + (Math.floor(Math.random() * Number((n - 1) / 2)) + 1);
    },
    subQuestion() {
      if (this.getQuestion.length != 0) {
        this.createChat("right", "UserName", this.getQuestion);

        // 增加动画
        $("#chat").addClass("loading");
        // 禁用输入框
        $(this.$refs.chatInput).prop({
          disabled: true,
        });

        this.chatToBottom();

        axios
          .get(
            `http://api.lxylw.design/api/Askanswer/wenda/type=${
              this.typeList[this.questionType].value
            }&question=${this.getQuestion}/`
          )
          .then((respons) => {
            // console.log(respons.data.answer);
            this.createChat("left", "小药机器人", respons.data.answer);

            // 关闭动画
            $("#chat").removeClass("loading");
            // 开启输入框
            $(this.$refs.chatInput).prop({
              disabled: false,
            });
          })
          .catch((error) => {
            this.createChat(
              "left",
              "小药机器人",
              "你难住我了，我先记下来，过几天告诉你吧"
            );

            // 关闭动画
            $("#chat").removeClass("loading");
            // 开启输入框
            $(this.$refs.chatInput).prop({
              disabled: false,
            });
          });
        // axios
        //   .get(
        //     `http://api.lxylw.design/api/Askanswer/askanswer/question=${this.getQuestion}/`
        //   )
        //   .then((respons) => {
        //     // console.log(respons.data);
        //     this.createChat(
        //       "left",
        //       "小药机器人",
        //       respons.data[this.selectAnswer(Object.keys(respons.data).length)]
        //       // $('#chat-area').scrollTop()
        //     );
        //   });
        this.question = "";
        // this.chat_input = false;
      }
    },
    createChat(position, name, message) {
      this.chatList.push({
        position,
        name,
        message,
      });
      setTimeout(this.chatToBottom(), 1000);
    },
    chatToBottom() {
      $("#chat-area").animate(
        { scrollTop: $("#chat-area").prop("scrollHeight") },
        400
      );
    },
    // questionChange() {
    //   if (this.getQuestion.length != 0) {
    //     axios
    //       .get(
    //         `http://api.lxylw.design/api/Askanswer/getquestion/question=${this.getQuestion}/`
    //       )
    //       .then((respons) => {
    //         // console.log(respons.data);
    //         if (respons.data != null) {
    //           this.questionList = [];
    //           for (let i = 1; i <= 3; i++) {
    //             this.questionList.push(respons.data["ans" + i]);
    //           }
    //           // this.chat_input = true;
    //         }
    //       });
    //   } else {
    //     // this.chat_input = false;
    //   }
    // },
    // questionGetHelp(index) {
    //   this.question = this.questionList[index];
    //   this.chat_input = false;
    //   $(this.$refs.chatInput).focus();
    //   this.subQuestion();
    // },
    selectType(index) {
      this.questionType = index;
      // console.log(this.questionType);

      $("#chat .chat-type-item").removeClass("select");
      $(`#chat .chat-type-item:eq(${index})`).addClass("select");
    },
  },
  components: {
    Header,
    ReturnTop,
    Reload,
  },
};
</script>

<style scoped>
#chat {
  position: relative;
  z-index: 10;
  padding: 0 10%;
  background-color: #fff;
}
#chat::before {
  content: "";
  position: absolute;
  display: block;
  width: 80%;
  height: 500px;
  background: url("../assets/img/loading.gif") no-repeat center center;
  background-size: 35%;
  z-index: -100;
  transition: all 1s;
  opacity: 0;
}
#chat.loading::before {
  /* height: 600px; */
  z-index: 100;
  opacity: 1;
}

#chat > .container {
  position: relative;
  padding: 10px 0;
  border: 2px solid #6442d5;
  border-radius: 20px;
}

#chat button {
  box-sizing: border-box;
  padding: 0 20px;
  height: 38px;
  line-height: 38px;
}
#chat input {
  border-radius: 8px 8px 8px 8px;
}
#chat input:focus {
  outline: none;
  /* border-color: #7876e1; */
  box-shadow: 0 0 5px #7876e1;
  /* box-shadow: 0 0 5px transparent; */
}

#chat-area {
  width: 100%;
  height: 450px;
  overflow: auto;
  margin: 10px 15px;
  border-top: 1px solid #6442d5;
  border-bottom: 1px solid #6442d5;
}

#chat-area.loading::before {
  opacity: 1;
}
#chat #info {
  position: relative;
  /* height: 50px; */
  margin: 10px 10%;
}

#chat #info img {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  /* border: 1px solid #cbe5c8; */
}
#chat #info .left img {
  left: -25px;
}
#chat #info .right img {
  right: -25px;
}

#chat #info .name {
  margin: 0 30px;
  color: #8b8b8b;
  font-size: 12px;
  display: block;
  line-height: 18px;
}
#chat #info .content {
  position: relative;
  margin: 0 30px;
  word-break: break-all;
  word-wrap: break-word;
  display: inline-block;
  font-size: 14px;
  padding: 6px 12px;
  line-height: 20px;
  border-radius: 6px;
}
#chat #info .left .content {
  background-color: #ccc;
}
#chat #info .right .content {
  background-color: #78cdf8;
}

#chat #info .left,
#chat #info .right span:last-child {
  text-align: left;
}
#chat #info .right {
  text-align: right;
}

#chat #info .left .content:after {
  content: "";
  position: absolute;
  border-bottom: 8px solid rgba(255, 255, 255, 0);

  left: -12px;
  top: 8px;
  border-right: 12px solid #cccccc;
}
#chat #info .right .content:after {
  content: "";
  position: absolute;
  border-bottom: 8px solid rgba(255, 255, 255, 0);

  right: -12px;
  top: 8px;
  border-left: 12px solid #78cdf8;
}

#chat .info-input input {
  width: 70%;
}
#chat .info-input ul {
  position: absolute;
  /* left: 90px; */
  top: 42px;
  background-color: #fff;
  border: 1px solid #6442d5;

  width: 84%;
  border-radius: 8px 8px 8px 8px;
  /* line-height: 1.5; */
  /* padding: 0 8%; */
}
#chat .info-input ul li {
  padding: 0 0.75rem;
  line-height: 26px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 576px) {
  #blog {
    padding-bottom: 4rem;
  }
}

#chat #chat-type {
  clear: both;
}
#chat .chat-type {
  clear: both;
  margin: 10px 0 20px 0;
  /* text-align: center; */
  margin: 0 auto;
}
#chat .chat-type-title {
  float: left;
  margin-left: 20px;
  box-shadow: none;
  border: none;
  color: #5c69a9;
  background-color: transparent;
  margin: 0 0 5px 0;
  padding: 10px;
}
#chat .chat-type-item {
  float: left;
  margin: 0 5px 5px 5px;
  box-shadow: none;
  border: none;
  background-color: #6e45e2;
  padding: 10px 12px;
}
#chat .chat-type-item.select {
  background-color: #ff9624;
}
#chat .chat-type-item:hover {
  color: #fff;
}
#chat .chat-type-title:hover {
  color: #5c69a9;
}
</style>
